<!-- 滚动吸附效果演示 -->
<template>
	<view class="content">
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			style="height: calc(100% - 55px);" @scrolltolower="scrollToBottomFun">
			<!--入库单基本信息-->
			<stockIntoCard :item="infoObj" :isDetail="true"></stockIntoCard>
			<!--tab-->
			<view class="uTabsView">
				<u-tabs :list="tabList" :is-scroll="true" duration="0.08" :current="tabIndex" :show-bar="false"
					font-size="32" @change="tabChange"></u-tabs>
			</view>
			<view class="contentView">
				<!--详细信息-->
				<view v-if="tabIndex == 0">
					<stockIntoDetail :infoObj="infoObj"></stockIntoDetail>
				</view>
				<!--产品信息-->
				<view v-if="tabIndex == 1">
					<view class="myCard" v-if="tabList[1].arr.length > 0">
						<view class="cardTopName">产品汇总</view>
						<view class="flexRow">
							<view>
								<view>总数量：</view>
								<view>{{cpHzObj.total_num}}</view>
							</view>
							<view>
								<view>价格合计：</view>
								<view>{{(cpHzObj.total_money).toFixed(2)}}元</view>
							</view>
						</view>
					</view>
					<view v-for="(item, index) in tabList[1].arr" :key="index">
						<stockIntoListCard :item="item"></stockIntoListCard>
					</view>
				</view>
				<!--加载更多-->
				<getMore :isMore="tabList[tabIndex].isMore"></getMore>
			</view>
		</z-paging>
		<bottomBoxStock :sheetList="sheetList" :isAudit="infoObj.status" @pageDeleteShowFun="pageDeleteShowFun"
			@pageBianjiFun="pageBianjiFun" @pageHandleAuditFun="pageHandleAuditFun"></bottomBoxStock>
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = '';
	import {
		apiStockInto
	} from '@/api/crm.js'
	import bottomBoxStock from '@/components/bottomBox/bottomBoxStock'
	import stockIntoCard from '@/components/card/stockIntoCard.vue'
	import stockIntoDetail from '@/components/detail/stockIntoDetail.vue'
	import stockIntoListCard from '@/components/card/stockIntoListCard.vue'
	import getMore from '@/components/getMore/getMore.vue'
	export default {
		components: {
			bottomBoxStock,
			stockIntoCard,
			stockIntoDetail,
			stockIntoListCard,
			getMore
		},
		data() {
			return {
				selectList: [],
				selectShow: false,
				infoObj: {},
				dataList: [

				],
			tabList: [{
					name: '详细信息',
					arr: [],
					pageNum: 1,
					isMore: false
				},
				{
					name: '产品详细',
					arr: [],
					pageNum: 1,
					isMore: true
				}
			],
				sheetList: [{
						text: '更换负责人'
					},
					{
						text: '放入客户池'
					},
					{
						text: '删除'
					}
				],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: 0,
				isLoadSelectById: false
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index;
			if (e.fromDetail) {
				that.selectDetailByIdFun(e.id)
			} else {

				that.infoObj = uni.$stockIntoInfo || {};
				let infoObj = that.infoObj;
				if (infoObj.cpList && infoObj.cpList.length > 0) {
					let cpItem = that.tabList[1];
					cpItem.arr = infoObj.cpList;
					cpItem.name += '(' + infoObj.cpList.length + ')';
					that.$set(that.tabList, 1, cpItem)
				}
			}
			uni.$on('updateStockIntoDetail', that.updateStockIntoDetailFun)
		},
		onShow() {
			if (that.isLoadSelectById) {
				that.selectDetailByIdFun();
			}
		},
		onBackPress(e) {
			uni.$off('updateStockIntoDetail', that.updateStockIntoDetailFun)
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				let obj = this.infoObj;
				uni.$emit('updateStockIntoListByIndex', {
					index: this.cardIndex,
					obj
				})
			}
		},
		methods: {
			// 处理入库单更新事件
			updateStockIntoDetailFun: function(e) {
				if (e.id == that.infoObj.id) {
					// 重新加载详情数据
					that.selectDetailByIdFun(e.id);
				}
			},
			tabChange(index) {
				this.tabIndex = index;
				let item = that.tabList[index];
				if (item.arr && item.arr.length > 0) {
					return
				}
				if (index == 1) {
					that.getCpByIdFun()
				}
			},
			itemClick(item) {
				console.log('点击了', item.title);
			},
			scrollToBottomFun: function(e) {
				let index = that.tabIndex;
				let isMore = that.tabList[index].isMore;
				if (!isMore) {
					return
				}
				if (index == 1) {
					that.getCpByIdFun()
				}
			},
			// 修改信息
			pageBianjiFun: function() {
				that.isLoadSelectById = true;
				uni.$infoObj = that.infoObj;
				uni.navigateTo({
					url: './add?type=update'
				})
			},
			// 审核/撤销审核
			pageHandleAuditFun: function(action) {
				uni.showModal({
					title: '提示',
					content: action === 'audit' ? '确认审核此入库单吗？' : '确认撤销审核此入库单吗？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...',
								mask: true
							})
							let reqData = {
								action: action === 'audit' ? 'audit' : 'cancel',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiStockInto(reqData)
								.then(res => {
									uni.showToast({
										title: action === 'audit' ? '审核成功!' : '撤销审核成功!',
										duration: 888,
										icon: 'none'
									})
									// 重新加载数据
									setTimeout(() => {
										that.selectDetailByIdFun()
									}, 666)
								})
						}
					}
				})
			},
			// 审核/撤销审核
			pageHandleAuditFun: function(action) {
				uni.showModal({
					title: '提示',
					content: action === 'audit' ? '确认审核此入库单吗？' : '确认撤销审核此入库单吗？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...',
								mask: true
							})
							let reqData = {
								action: action === 'audit' ? 'audit' : 'cancel',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiStockInto(reqData)
								.then(res => {
									uni.showToast({
										title: action === 'audit' ? '审核成功!' : '撤销审核成功!',
										duration: 888,
										icon: 'none'
									})
									// 重新加载数据
									setTimeout(() => {
										that.selectDetailByIdFun()
									}, 666)
								})
						}
					}
				})
			},
			// 删除信息
			pageDeleteShowFun: function(e) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除入库单名称为：' + that.infoObj.name + '的入库单吗?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiStockInto(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 888,
										icon: 'none'
									})
									uni.$emit('deleteCardFun', {
										index: that.cardIndex
									})
									setTimeout(() => {
										// 重定向到入库单列表页面
										uni.redirectTo({
											url: './show'
										})
									}, 666)
								})
						}
					}
				})
			},
			// 根据id查询
			selectDetailByIdFun: function(_id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_detail',
					params: {
						req:{
							id: ''
						}
					}
				}
				if (_id) {
					reqData.params.req.id = _id;
				} else {
					reqData.params.req.id = that.infoObj.id;
				}
				apiStockInto(reqData)
					.then(res => {
						if (res.code == 1) {
							that.infoObj = res.data
							uni.$stockIntoInfo=res.data;
							
							// 更新产品列表数据
							if (res.data.cpList && res.data.cpList.length > 0) {
								let cpItem = that.tabList[1];
								cpItem.arr = res.data.cpList;
								cpItem.name = '产品信息(' + res.data.cpList.length + ')';
								that.$set(that.tabList, 1, cpItem)
							}
							
							setTimeout(() => {
								uni.hideLoading()
							}, 888);
							
						} else {
							uni.showModal({
								title: '提示',
								content: '相关内容不存在，或者已被删除！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}
					})
			},
			// 根据id查询产品列表
			getCpByIdFun: function() {
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_detail',
					params: {
						req:{
							id: that.infoObj.id
						},
						sortObj:{},
						pageNum: item.pageNum
					}
				}
				apiStockInto(reqData)
					.then(res => {
						let goodsList = res.data.goods_list;
						let cpHzObj = {
							total_money: 0,
							total_num: 0
						};
						for (var i = 0; i < goodsList.length; i++) {
							var obj = goodsList[i];
							cpHzObj.total_money += parseFloat(obj.price) * parseFloat(obj.num);
							cpHzObj.total_num += parseFloat(obj.num);
						}
						
						that.cpHzObj = cpHzObj;
						let item = that.tabList[that.tabIndex];
						item.arr = goodsList;
						item.isMore = false;
						that.$set(that.tabList, that.tabIndex, item)
					})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}

	.uTabsView {
		border-bottom: 1rpx solid #DDDDDD;
		z-index: 100;
		position: sticky;
		top: 0;
	}

	.contentView {
		/* background-color: #FFFFFF; */
		min-height: calc(100vh - 45px);
	}

	.flexRow {
		display: flex;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.flexRow>view {
		width: 50%;
		display: flex;
	}

	.flexRow>view>text:first-child {
		width: 166rpx;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.uTabsView {
		top: -2px !important;
	}
</style>